বুটস্ট্রাপ ৫ এ Offcanvas এবং Toasts দুটি অত্যন্ত কার্যকরী উপাদান যা ইউজার ইন্টারফেসকে আরও উন্নত এবং ইন্টারেক্টিভ করে তোলে।
Offcanvas একটি স্লাইডিং প্যানেল বা মেনু যা স্ক্রীনের বাইরে থেকে স্লাইড করে এসে দেখা যায়। এটি সাধারণত মোবাইল বা ছোট স্ক্রীনে ব্যবহারকারীর জন্য ন্যাভিগেশন মেনু বা অন্যান্য কন্টেন্ট দেখানোর জন্য ব্যবহার করা হয়। এটি বুটস্ট্রাপ ৫ এর একটি নতুন ফিচার যা আপনাকে রেসপন্সিভ সাইডবার তৈরি করতে সাহায্য করে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offcanvas Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Offcanvas Trigger -->
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Offcanvas খুলুন
</button>
<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas মেনু</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="list-unstyled">
<li><a href="#">হোম</a></li>
<li><a href="#">আমাদের সম্পর্কে</a></li>
<li><a href="#">সেবাসমূহ</a></li>
<li><a href="#">যোগাযোগ</a></li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
data-bs-toggle="offcanvas" এবং data-bs-target="#offcanvasExample" এই অ্যাট্রিবিউটগুলো ব্যবহার করে, আপনি যে বাটনটি ক্লিক করবেন, তা #offcanvasExample আইডি সহ একটি Offcanvas প্যানেল খোলার নির্দেশ দেয়।offcanvas-start ক্লাসটি বাম দিক থেকে Offcanvas প্রদর্শন করার জন্য ব্যবহার করা হয়েছে। আপনি offcanvas-end ব্যবহার করে এটি ডান দিক থেকেও স্লাইড করতে পারেন।btn-close ব্যবহার করে আপনি Offcanvas বন্ধ করার জন্য একটি বাটন তৈরি করেছেন।Toasts হচ্ছে ক্ষণস্থায়ী নোটিফিকেশন বা বার্তা, যা পেজের নিচে বা উপরের অংশে স্লাইড করে প্রদর্শিত হয়। সাধারণত এই ধরনের নোটিফিকেশন ইনফরমেশন বা সাকসেস/এrror বার্তা প্রদর্শনের জন্য ব্যবহৃত হয়। এটি একটি সুন্দরভাবে প্রদর্শিত বার্তা যা কিছু সময় পর নিজে থেকেই নিঃশেষ হয়ে যায়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toast Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Toast Trigger Button -->
<button class="btn btn-primary" id="liveToastBtn">Toast দেখান</button>
<!-- Toast Notification -->
<div class="toast-container position-fixed top-0 end-0 p-3">
<div id="liveToast" class="toast align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
সাকসেস! আপনার কাজ সফলভাবে সম্পন্ন হয়েছে।
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
<script>
// Toast Display Logic
var toastTrigger = document.getElementById('liveToastBtn');
var toastLiveExample = document.getElementById('liveToast');
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExample);
toast.show();
});
}
</script>
</body>
</html>
#liveToastBtn বাটনটি ক্লিক করলে Toast প্রদর্শিত হবে।toast ক্লাসের মাধ্যমে Toast নোটিফিকেশন তৈরি করা হয়েছে। এতে toast-body ক্লাসে বার্তাটি রয়েছে এবং btn-close দিয়ে টোস্টটি বন্ধ করার অপশন রাখা হয়েছে।position-fixed top-0 end-0 দিয়ে টোস্টটি স্ক্রীনের উপরের ডান দিকে স্থাপন করা হয়েছে।বুটস্ট্রাপ ৫ এর Offcanvas এবং Toasts ব্যবহার করে আপনি সহজেই স্লাইডিং মেনু এবং ক্ষণস্থায়ী নোটিফিকেশন তৈরি করতে পারবেন, যা আপনার ওয়েব পেজের ইন্টারেকশন এবং ইউজার এক্সপেরিয়েন্সকে আরও উন্নত করবে। Offcanvas সাইডবারের মাধ্যমে ব্যবহারকারীকে আরও ভালো নেভিগেশন উপায় প্রদান করা সম্ভব, আর Toast দিয়ে বার্তা বা নোটিফিকেশন খুব দ্রুত এবং মসৃণভাবে ব্যবহারকারীর কাছে পৌঁছানো যায়।
Offcanvas Sidebar হল এমন একটি সাইডবার যা ডিফল্টভাবে স্ক্রীন থেকে বাইরে থাকে এবং ব্যবহারকারী একটি বাটন ক্লিক করার মাধ্যমে এটি স্ক্রীনে প্রবেশ করে। বুটস্ট্রাপ ৫ এ অফক্যানভাস সাইডবার তৈরি করা খুবই সহজ এবং এটি রেসপন্সিভ ডিজাইনে উপযুক্ত, কারণ এটি মোবাইল বা ছোট স্ক্রীনে সাইডবারের প্রয়োজনীয়তা মেটায় এবং ডেক্সটপে সম্পূর্ণ সাইডবার প্রদর্শিত হয়।
বুটস্ট্রাপ ৫ এ Offcanvas একটি নতুন উপাদান হিসেবে এসেছে, যা খুবই ফ্লেক্সিবল এবং কাস্টমাইজযোগ্য। এটি সাইডবার বা অন্য কোন কন্টেন্টের জন্য ব্যবহৃত হতে পারে যা স্ক্রীনের বাইরে থাকে এবং ব্যবহারকারী একটি ট্রিগার অ্যাকশন থেকে এটি দেখতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offcanvas Sidebar Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Trigger Button -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Open Sidebar
</button>
<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas Sidebar</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<h5>Navigation Links</h5>
<ul class="list-unstyled">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
data-bs-toggle="offcanvas" এবং data-bs-target="#offcanvasExample" অ্যাট্রিবিউট ব্যবহার করে সাইডবারটি ট্রিগার করে। data-bs-target="#offcanvasExample" এর মাধ্যমে এটি সাইডবারের আইডি (#offcanvasExample) সিলেক্ট করে।offcanvas offcanvas-start: এই ক্লাস দুটি সাইডবারটিকে স্ক্রীনের বাম পাশে (ডিফল্টভাবে) লোড করবে। আপনি offcanvas-end ব্যবহার করে সাইডবারকে ডান পাশে শো করাতে পারেন।offcanvas-header: সাইডবারের হেডার অংশ, যেখানে শিরোনাম এবং ক্লোজ বাটন থাকে।offcanvas-body: এখানে আপনি সাইডবারের মূল কন্টেন্ট যেমন ন্যাভিগেশন লিংকস বা অন্যান্য কন্টেন্ট রাখতে পারবেন।data-bs-dismiss="offcanvas" ক্লাসটি ক্লোজ বাটনে অ্যাপ্লাই করা হয়েছে, যা সাইডবার বন্ধ করতে সাহায্য করে।সাইডবারের পজিশন পরিবর্তন করা:
offcanvas-start ক্লাসটির পরিবর্তে offcanvas-end ক্লাস ব্যবহার করুন।<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
সাইডবারের আকার পরিবর্তন করা:
.offcanvas {
width: 250px;
}
বুটস্ট্রাপ ৫-এ Offcanvas সাইডবার স্বয়ংক্রিয়ভাবে রেসপন্সিভ ডিজাইন অনুসরণ করে। ছোট স্ক্রীনে (যেমন মোবাইল) এটি সাইডবার হিসেবে ব্যবহৃত হয়, এবং বড় স্ক্রীনে (যেমন ডেক্সটপ) এটি একাধিক ন্যাভিগেশন লিংক বা কন্টেন্টের জন্য পুরোপুরি দৃশ্যমান হতে পারে।
এইভাবে আপনি খুব সহজেই Offcanvas Sidebar তৈরি করতে পারেন যা রেসপন্সিভ এবং ইন্টারেক্টিভ হতে পারে, এবং ব্যবহারকারীর জন্য একটি উন্নত নেভিগেশন অভিজ্ঞতা প্রদান করবে।
Offcanvas কম্পোনেন্ট বুটস্ট্র্যাপ ৫ এর একটি চমৎকার ফিচার যা সাইড প্যানেল বা মেনু তৈরি করতে ব্যবহৃত হয়। এটি ব্যবহারকারীর স্ক্রীনে বাইরে থেকে স্লাইড করে আসতে পারে এবং অ্যানিমেশন সহ সঠিকভাবে প্রদর্শিত হয়। Offcanvas কম্পোনেন্ট ব্যবহার করে আপনি সাইড বার বা ড্রপডাউন মেনু তৈরি করতে পারেন যা এক্সপ্যান্ড এবং কোলাপস করতে পারে।
এটি মোবাইল ডিভাইসে বিশেষভাবে কার্যকর, কারণ ছোট স্ক্রীনে এটি পেজে অতিরিক্ত এলিমেন্ট রাখার পরিবর্তে স্লাইড-ইন মেনু হিসেবে কাজ করতে পারে।
বুটস্ট্র্যাপ ৫ এর Offcanvas কম্পোনেন্ট কিছু নির্দিষ্ট ইভেন্ট সরবরাহ করে যেগুলি ব্যবহারকারীর জন্য কার্যকরী হতে পারে। এগুলোর মাধ্যমে আপনি কম্পোনেন্টের বিভিন্ন ধাপে কাস্টম আচরণ নির্ধারণ করতে পারবেন।
show.bs.offcanvas
এই ইভেন্টটি তখন ট্রিগার হয় যখন offcanvas প্যানেলটি প্রদর্শিত হতে শুরু করে।
var offcanvasElement = document.getElementById('offcanvasExample');
offcanvasElement.addEventListener('show.bs.offcanvas', function () {
console.log('Offcanvas is about to be shown.');
});
shown.bs.offcanvas
এই ইভেন্টটি তখন ট্রিগার হয় যখন offcanvas প্যানেলটি সম্পূর্ণভাবে প্রদর্শিত হয়।
var offcanvasElement = document.getElementById('offcanvasExample');
offcanvasElement.addEventListener('shown.bs.offcanvas', function () {
console.log('Offcanvas is fully shown.');
});
hide.bs.offcanvas
এই ইভেন্টটি তখন ট্রিগার হয় যখন offcanvas প্যানেলটি লুকানোর প্রক্রিয়া শুরু হয়।
var offcanvasElement = document.getElementById('offcanvasExample');
offcanvasElement.addEventListener('hide.bs.offcanvas', function () {
console.log('Offcanvas is about to be hidden.');
});
hidden.bs.offcanvas
এই ইভেন্টটি তখন ট্রিগার হয় যখন offcanvas প্যানেলটি সম্পূর্ণভাবে লুকিয়ে যায়।
var offcanvasElement = document.getElementById('offcanvasExample');
offcanvasElement.addEventListener('hidden.bs.offcanvas', function () {
console.log('Offcanvas is fully hidden.');
});
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Open Offcanvas
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>This is an offcanvas element. You can add any content here.</p>
</div>
</div>
<script>
var offcanvasElement = document.getElementById('offcanvasExample');
offcanvasElement.addEventListener('show.bs.offcanvas', function () {
console.log('Offcanvas is about to be shown.');
});
offcanvasElement.addEventListener('shown.bs.offcanvas', function () {
console.log('Offcanvas is fully shown.');
});
offcanvasElement.addEventListener('hide.bs.offcanvas', function () {
console.log('Offcanvas is about to be hidden.');
});
offcanvasElement.addEventListener('hidden.bs.offcanvas', function () {
console.log('Offcanvas is fully hidden.');
});
</script>
Offcanvas প্যানেলটি একটি স্লাইড-ইন/আউট অ্যানিমেশন দিয়ে প্রদর্শিত হয়, যা অত্যন্ত ইউজার ফ্রেন্ডলি। এই অ্যানিমেশনটি বুটস্ট্র্যাপের ডিফল্ট ব্যবহারকারীর অভিজ্ঞতার অংশ এবং সহজেই কাস্টমাইজ করা যায়।
বুটস্ট্র্যাপের offcanvas কম্পোনেন্টের জন্য কিছু ডিফল্ট অ্যানিমেশন রয়েছে, যা প্যানেলটি স্ক্রীনের বাইরে থেকে স্লাইড করে আসে এবং বের হয়ে যায়। এই অ্যানিমেশনগুলি সিএসএস transition প্রপার্টি ব্যবহার করে অর্জিত হয়।
আপনি চাইলে CSS দিয়ে কাস্টম অ্যানিমেশন যোগ করতে পারেন।
<style>
.offcanvas-start {
transition: transform 0.5s ease-in-out;
}
.offcanvas-start.show {
transform: translateX(0);
}
.offcanvas-start:not(.show) {
transform: translateX(-100%);
}
</style>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Open Offcanvas
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>This is an offcanvas element with custom animation.</p>
</div>
</div>
এখানে, transition প্রপার্টি ব্যবহার করা হয়েছে যা অ্যানিমেশনকে আরও স্মুথ এবং কাস্টমাইজযোগ্য করে।
Toast Notifications হচ্ছে ছোট, স্বল্প সময়ের জন্য প্রদর্শিত মেসেজ এলিমেন্ট যা সাধারণত পেজের নিচে বা উপরে আনার জন্য ব্যবহার করা হয়। এটি সাধারণত ব্যবহারকারীদের কোনো অ্যাকশন বা কার্যকলাপের উপর প্রতিক্রিয়া জানাতে সাহায্য করে, যেমন সফলভাবে কোনো কাজ সম্পন্ন হয়েছে বা ত্রুটি ঘটেছে। Bootstrap 5 এ Toast কম্পোনেন্ট খুব সহজে ব্যবহারযোগ্য এবং এর অনেক কাস্টমাইজেশন অপশন রয়েছে।
Bootstrap Toast কম্পোনেন্টের HTML কোড:
প্রথমে আপনি একটি toast তৈরি করতে পারবেন যেটি আপনার পেজে ব্যবহারকারীকে প্রদর্শন করতে চান।
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap 5</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
আপনার কাজ সফলভাবে সম্পন্ন হয়েছে!
</div>
</div>
</div>
এখানে:
position-fixed bottom-0 end-0 p-3 ক্লাস ব্যবহার করা হয়েছে টোস্টটিকে স্ক্রীনের নীচে এবং ডানদিকে স্থাপন করার জন্য।aria-live="assertive" এবং aria-atomic="true" এটিকে অ্যাক্সেসিবিলিটি মানদণ্ডে রাখতে সাহায্য করে।টিন্ডার বা বাটন ব্যবহার করে Toast প্রদর্শন:
আপনি JavaScript ব্যবহার করে টোস্ট কন্ট্রোল করতে পারেন। উদাহরণস্বরূপ, একটি বাটন ক্লিক করার মাধ্যমে টোস্ট প্রদর্শন করা যেতে পারে।
<button class="btn btn-primary" id="liveToastBtn">Show Toast</button>
এখন আপনি Toast প্রদর্শন করতে JavaScript কোড যুক্ত করতে পারেন:
<script>
var toastEl = document.getElementById('liveToast');
var toast = new bootstrap.Toast(toastEl); // Bootstrap 5 Toast Object
var toastBtn = document.getElementById('liveToastBtn');
toastBtn.addEventListener('click', function () {
toast.show(); // Toast Show Method
});
</script>
এখানে:
new bootstrap.Toast(toastEl) ব্যবহার করে টোস্ট এলিমেন্টকে একটি টোস্ট অবজেক্টে রূপান্তর করা হয়েছে।toast.show() কল করার মাধ্যমে টোস্টটি প্রদর্শিত হবে।বুটস্ট্র্যাপ ৫ এ Toast এর অনেক কাস্টমাইজেশন অপশন রয়েছে, যেমন:
Delay: আপনি টোস্টের প্রদর্শন সময়ের জন্য একটি ডিলে নির্ধারণ করতে পারেন। এটি animation প্রপার্টি দিয়ে কাস্টমাইজ করা যায়।
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
<div class="toast-header">
<strong class="me-auto">Success</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Your action was successful.
</div>
</div>
</div>
এখানে, data-bs-delay="5000" দিয়ে ৫ সেকেন্ডের জন্য টোস্টটি প্রদর্শিত হবে।
Auto-hide: বুটস্ট্র্যাপে টোস্টগুলো ডিফল্টভাবে অটো-হাইড হয়, কিন্তু আপনি যদি এটি কন্ট্রোল করতে চান তবে data-bs-autohide অ্যাট্রিবিউট ব্যবহার করতে পারেন।
<div class="toast" data-bs-autohide="false">
<div class="toast-header">
<strong class="me-auto">Custom Toast</strong>
</div>
<div class="toast-body">
You can close this manually!
</div>
</div>
কাস্টম স্টাইল (Style Customization): আপনি CSS ব্যবহার করে টোস্টের ব্যাকগ্রাউন্ড কালার, টেক্সট কালার, অথবা অন্যান্য স্টাইল কাস্টমাইজ করতে পারেন।
<style>
.toast {
background-color: #28a745; /* Green color */
color: white;
}
</style>
Bootstrap 5 Toast কম্পোনেন্টটি ইভেন্টও সাপোর্ট করে। আপনি টোস্টের Show, Shown, Hide, এবং Hidden ইভেন্টগুলি ট্র্যাক করতে পারেন।
<script>
var toastEl = document.getElementById('liveToast');
var toast = new bootstrap.Toast(toastEl);
toastEl.addEventListener('show.bs.toast', function () {
console.log('Toast is about to be shown');
});
toastEl.addEventListener('shown.bs.toast', function () {
console.log('Toast has been shown');
});
toastEl.addEventListener('hide.bs.toast', function () {
console.log('Toast is about to be hidden');
});
toastEl.addEventListener('hidden.bs.toast', function () {
console.log('Toast has been hidden');
});
</script>
এখানে, show.bs.toast এবং shown.bs.toast ইভেন্ট ব্যবহার করে আপনি টোস্টের শো এবং শো হওয়ার পরে কোনো অ্যাকশন নিতে পারেন।
Bootstrap 5 এর Toast Notifications তৈরি করা খুব সহজ এবং দ্রুত। এটি ব্যবহারকারীদের কার্যকলাপের উপর প্রতিক্রিয়া জানাতে সহায়ক। আপনি এগুলি HTML, CSS এবং JavaScript দিয়ে কাস্টমাইজ করে টোস্টের অ্যানিমেশন এবং টাইমিং নিয়ন্ত্রণ করতে পারেন।
বুটস্ট্রাপ ৫-এ টোস্ট একটি ছোট, অটো-ক্লোজিং এলার্ট মেসেজ যা সাধারণত পেজের নিচের বা উপরের কোন এক কোনায় প্রদর্শিত হয়। এটি ব্যবহারকারীদের জন্য হালকা বা অস্থায়ী তথ্য প্রদানের জন্য উপযুক্ত। আপনি কাস্টম টোস্ট তৈরি করতে পারেন, যা সহজেই বিভিন্ন ইভেন্টের মাধ্যমে প্রদর্শিত বা লুকানো যেতে পারে।
বুটস্ট্রাপ ৫ এ toast ক্লাস ব্যবহার করে আপনি সহজেই কাস্টম টোস্ট তৈরি করতে পারেন। টোস্ট সাধারণত toast-header এবং toast-body ক্লাসের মাধ্যমে কনটেন্ট প্রদর্শন করে। আপনি চাইলে এই টোস্টে কাস্টম ক্লাস এবং স্টাইলও যোগ করতে পারেন।
<!-- টোস্টের HTML -->
<div class="toast-container position-fixed bottom-0 end-0 p-3" id="liveToast">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">নোটিফিকেশন</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
আপনার পরিবর্তন সফলভাবে সেভ হয়েছে!
</div>
</div>
</div>
<!-- বুটস্ট্রাপ স্ক্রিপ্ট -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
এখানে:
toast-container: এটি টোস্টের ধারক (container) যেটি পজিশনফিক্সড করে সেটি পেজের নিচে ডানদিকে দেখাবে।toast-header: এই অংশে টোস্টের শিরোনাম থাকে, যেমন "নোটিফিকেশন"।toast-body: এখানে টোস্টের মূল কনটেন্ট থাকে, যেমন "আপনার পরিবর্তন সফলভাবে সেভ হয়েছে!"।btn-close: এটি টোস্টটি বন্ধ করার বাটন।বুটস্ট্রাপ ৫ এ টোস্টের জন্য কিছু গুরুত্বপূর্ণ ইভেন্টস থাকে, যা ব্যবহারকারীর ইন্টারঅ্যাকশনের ভিত্তিতে টোস্ট প্রদর্শন বা লুকাতে সহায়তা করে। এই ইভেন্টগুলো ব্যবহার করে আপনি টোস্টের কার্যকলাপ কাস্টমাইজ করতে পারেন।
show.bs.toast: যখন টোস্ট শো হওয়ার প্রস্তুতি নেয় তখন এই ইভেন্টটি ট্রিগার হয়।shown.bs.toast: টোস্ট যখন সফলভাবে শো হয়ে যায় তখন এই ইভেন্টটি ট্রিগার হয়।hide.bs.toast: টোস্ট হাইড করার প্রস্তুতি নেওয়ার সময় এই ইভেন্টটি ট্রিগার হয়।hidden.bs.toast: টোস্ট যখন পুরোপুরি হাইড হয়ে যায় তখন এই ইভেন্টটি ট্রিগার হয়।<button type="button" class="btn btn-primary" id="showToastBtn">টোস্ট দেখুন</button>
<!-- টোস্টের HTML -->
<div class="toast-container position-fixed bottom-0 end-0 p-3" id="liveToast">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">নোটিফিকেশন</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
আপনার পরিবর্তন সফলভাবে সেভ হয়েছে!
</div>
</div>
</div>
<script>
// টোস্ট ইনস্ট্যান্স তৈরি
var toastEl = document.getElementById('liveToast');
var toast = new bootstrap.Toast(toastEl);
// টোস্ট দেখানোর জন্য বাটন ক্লিক ইভেন্ট
document.getElementById('showToastBtn').addEventListener('click', function () {
toast.show();
});
// ইভেন্ট লিসেনার: টোস্ট শো হওয়া
toastEl.addEventListener('show.bs.toast', function () {
console.log('টোস্ট শো হওয়ার প্রস্তুতি চলছে...');
});
// ইভেন্ট লিসেনার: টোস্ট শো হয়ে যাওয়ার পর
toastEl.addEventListener('shown.bs.toast', function () {
console.log('টোস্ট সফলভাবে শো হয়েছে!');
});
// ইভেন্ট লিসেনার: টোস্ট হাইড হওয়ার প্রস্তুতি
toastEl.addEventListener('hide.bs.toast', function () {
console.log('টোস্ট হাইড হওয়ার প্রস্তুতি চলছে...');
});
// ইভেন্ট লিসেনার: টোস্ট হাইড হয়ে যাওয়ার পর
toastEl.addEventListener('hidden.bs.toast', function () {
console.log('টোস্ট সফলভাবে হাইড হয়ে গেছে!');
});
</script>
এখানে:
new bootstrap.Toast(): এটি টোস্ট ইনস্ট্যান্স তৈরি করে, যা পরে toast.show() অথবা toast.hide() দ্বারা কন্ট্রোল করা যায়।addEventListener('show.bs.toast', function() {}): এটি টোস্ট শো হওয়ার পূর্বে ইভেন্ট ট্রিগার করতে ব্যবহৃত হয়।addEventListener('shown.bs.toast', function() {}): এটি টোস্ট শো হওয়ার পর ইভেন্ট ট্রিগার করতে ব্যবহৃত হয়।addEventListener('hide.bs.toast', function() {}): এটি টোস্ট হাইড হওয়ার পূর্বে ইভেন্ট ট্রিগার করতে ব্যবহৃত হয়।addEventListener('hidden.bs.toast', function() {}): এটি টোস্ট হাইড হওয়ার পর ইভেন্ট ট্রিগার করতে ব্যবহৃত হয়।আপনি চাইলে টোস্টটি অটো-ক্লোজ করানোর জন্য delay অপশন ব্যবহার করতে পারেন, যা টোস্টের প্রদর্শন সময় নির্ধারণ করে।
<script>
// টোস্টের জন্য অটো ক্লোজ সেট করা
var toast = new bootstrap.Toast(toastEl, {
delay: 5000 // ৫ সেকেন্ড পর টোস্ট স্বয়ংক্রিয়ভাবে বন্ধ হবে
});
toast.show();
</script>
এখানে delay অপশনের মাধ্যমে আপনি টোস্টের প্রদর্শন সময় কাস্টমাইজ করতে পারেন। ৫০০০ মিলিসেকেন্ড (৫ সেকেন্ড) পর এটি অটো-ক্লোজ হয়ে যাবে।
বুটস্ট্রাপ ৫-এ কাস্টম টোস্ট মেসেজ এবং তার সাথে সংযুক্ত ইভেন্টস ব্যবহার করে আপনি ইন্টারেক্টিভ এবং কাস্টমাইজড মেসেজ প্রদান করতে পারেন, যা ব্যবহারকারীর জন্য আরও অ্যাপ্লিকেশন-ফ্রেন্ডলি এবং ডিজাইন-স্মার্ট হতে সাহায্য করে। show.bs.toast, shown.bs.toast, hide.bs.toast, এবং hidden.bs.toast ইভেন্টগুলো ব্যবহার করে আপনি কাস্টম কার্যকলাপ যোগ করতে পারেন এবং টোস্টকে আরও ইন্টারঅ্যাকটিভ করতে পারেন।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
